import React from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { denglu } from '../../redux/actionCreator'

class Position extends React.Component {

    render() {
        // console.log(JSON.parse(localStorage.getItem('user')).user_name)
        return (
            <div style={{ width: '100%', backgroundColor: '#33273D', position: 'absolute', top: '0', height: '70px' }}>
                {/* 左边的个人信息 */}
                <div style={{ width: '90%' }}>
                    {/* 头像 */}
                    <div
                        onClick={() => { this.props.history.push('/me') }}
                        style={{ position: 'absolute', left: '5%', top: '15px', height: '3.5em', width: '3.5em', border: '1px solid #fff', borderRadius: '50%' }}>
                        <img style={{ height: '3.5em', width: '3.5em', borderRadius: '50%' }} src={`http://www.h5weixin.club:1025/api/image/${JSON.parse(localStorage.getItem('user')).user_pic}`}></img>
                    </div>
                    <span
                        onClick={() => { this.props.history.push('/me') }}
                        style={{ position: 'absolute', left: '30%', top: '20px' }}>
                        {/* 昵称 */}hello,
                        <span> {JSON.parse(localStorage.getItem('user')).user_name}</span>
                        {/* 个性签名 */}
                        <div style={{ marginTop: '5px' }}>{JSON.parse(localStorage.getItem('user')).user_sign}</div>
                    </span>
                </div>

                {/* 右边的选择城市 */}
                <div style={{ position: 'absolute', right: '5%', top: '20px' }}>石家庄</div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    commodity: state.shop
})

export default withRouter(connect(mapStateToProps)(Position))
